<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">商品支付</block>
		</cu-custom>

		<view class="padding-xs flex align-center solid-bottom" v-if="addressList.length === 0">
			<view class="flex-sub text-center">
				<view class="text-xl padding">
					<button class="cu-btn round line-orange" @click="addAddress">+添加收货地址</button>
				</view>
			</view>
		</view>
		
		<view class="padding-xs flex align-center solid-bottom" v-else>
			<view class="flex-sub text-center">
				<view class="text-xl padding flex align-center">
					<view v-if="defaultAddress.hasDefaultAddress" class="text-sm text-blue flex-twice">
						默认收货地址：{{ addressList[defaultAddress.index].address }}
					</view>
					<view class="flex-sub flex align-center justify-end">
						<view class="cuIcon-more"  @click="addAddress"></view>
					</view>
					
				</view>
			</view>
		</view>


		<view class="cu-list menu-avatar">
			<view class="cu-item" v-for="(item,index) in carList" :key="item.id">
				<view class="cu-avatar radius" :style="'background-image:url('+imageSrc+item.skuImage+')'"></view>
				<view class="content">
					<view class="text-gray">
						<view class="text-cut">{{ item.skuName }}</view>
					</view>
					<view class="text-gray text-sm">
						<text class="text-blue padding-lr">X{{ item.skuCount}}</text>
					</view>
				</view>
				<view class="action" style="margin-right: 10px;">
					<view class="text-grey text-sm">￥{{ item.skuPrice }}</view>
					<view class="text-red" >{{ item.skuCost }}</view>
				</view>
				<view class="action " v-if="edit">
					<label class="radio">
						<radio :value="item.skuId" :checked="item.selected==1 ? true : false " />
					</label>
				</view>

			</view>
		</view>

		<view class="cu-bar bg-white tabbar border shop foot">
			<button class="action flex-sub" open-type="contact">
				<view class="text-orange text-l">
					共计：{{ totalCount }}
				</view>
			</button>
			<view class="btn-group">
				<view class="cu-btn bg-orange radius">实际金额:{{ totalPrice }}</view>
				<button class="cu-btn bg-red round" @click="createOrder">付款</button>
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="hideModel?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white flex justify-between">
					<button class="cu-btn round text-green" @click="cancelModel">取消</button>
					<button class="cu-btn round text-red" @click="sureModel">确定</button>
				</view>
				<radio-group @change="radioChange">
					<view class="flex align-center justify-around" v-for="(item,index) in addressList" :key="item.id">
						<view class="flex justify-start align-center solid-bottom padding-top">
							<label class="radio">
								<radio :value="item.id" :checked="item.isDefault" />
								<view class='cu-tag  text-blue' v-if="item.isDefault">默认</view>
								<text>{{ item.address }}</text>
							</label>
						</view>
					</view>
				</radio-group>

				<view class="flex justify-between align-center padding">
					<button class="cu-btn round line-orange" @click.prevent.stop="setDefaultAddress">设置默认地址</button>
					<button class="cu-btn round line-orange"@click.prevent.stop="goToAddres">+新增地址</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hideModel: false,
				imageSrc: 'http://123.57.7.108:81/',
				cartId: '',
				carList: [],
				addressList: [],
				addrId:0,
				defaultAddress:{
					province:'',
					index:'',
					address:'',
					city:'',
					district:'',
					hasDefaultAddress:false
				}
			}
		},
		computed: {
			items:function(){
				let items = this.carList.map(item =>{
					return {
						count:item.count,
						skuId:item.skuId
					}
				})
				return items;
			},
			totalPrice: function() {
				let price = 0;
				this.carList.forEach(item => {
					price += item.skuPrice * item.skuCount;
				})
				return price;
			},
			totalCount: function() {
				let count = 0;
				this.carList.forEach(item => {
					count += item.skuCount;
				})
				return count;
			}
		},
		methods: {
			createOrder(){
				this.$storage.getStorage('user')
				.then(res =>{
					return this.$api.api_createOrder({
								address: this.defaultAddress.address,
								city:this.defaultAddress.city,
								orderMoney:this.totalPrice,
								customerId: res.data.id,
								district: this.defaultAddress.district,
								items:this.items,
								province: this.defaultAddress.province,
								shippingMoney: this.totalPrice,
								shippingPhone:res.data.mobilePhone,
								shippingUser: res.data.name,
								status: 0
							})
				})
				.then(res =>{
					uni.navigateTo({
						url:'../finishOrder/finishOrder'
					})
				})
				.catch(err =>{
					console.log(err)
				})
			},
			goToAddres(){
				uni.navigateTo({
					url:'../addAddress/addAddress'
				})
			},
			setDefaultAddress(){ 
				let flag = false;
				this.addressList.forEach(item =>{
					if(this.addrId == item.id && item.isDefault){
						flag = true;
						uni.showToast({
							title:'已是默认地址',
							duration:2000
						})
					}
				})
				if(!flag){
					this.$storage.getStorage('user')
					.then(res =>{
						return this.$api.api_updateDefaultAddress({
							addrId:this.addrId,
							customerId:res.data.id
						})
					})
					.then(res =>{
						this.addressList = res.data.data;
						res.data.data.forEach((item,index) =>{
							if(item.isDefault){
								this.addrId = item.id;
								this.defaultAddress.index = index;
								this.defaultAddress.address = item.address;
								this.defaultAddress.province = item.province;
								this.defaultAddress.city = item.city;
								this.defaultAddress.district = item.district;
								this.defaultAddress.hasDefaultAddress = true;
								return ;
							}
							if(index>res.data.data.length-1){
								this.addrId = 0; 
							}
						})
						uni.showToast({
							title:'设置成功！',
							duration:2000
						})
					})
					.catch(err =>{
						console.log(err)
					})
				}
			},
			radioChange(e) {
				this.addrId = e.detail.value;
			},
			addAddress() {
				this.hideModel = true;
			},
			cancelModel() {
				this.hideModel = false;
			},
			sureModel() {
				this.hideModel = false;
			},
			init() {
				this.$api.api_getCart()
					.then(res => {
						this.carList = [];
						this.cartId = res.data.data.id;
						res.data.data.items.forEach(item => {
							if (item.selected == 1) {
								this.carList.push(item)
							}
						});
						uni.stopPullDownRefresh();
					})
					.catch(err => {
						console.log(err)
					})
			},
			getCustomerAddress() {
				this.$storage.getStorage('user')
					.then(res => {
						return this.$api.api_customerAddress({
							id: res.data.id
						})
					})
					.then(res => {
						this.addressList = res.data.data;
						res.data.data.forEach((item,index) =>{
							if(item.isDefault){
								this.addrId = item.id;
								this.defaultAddress.index = index;
								this.defaultAddress.address = item.address;
								this.defaultAddress.hasDefaultAddress = true;
								this.defaultAddress.province = item.province;
								this.defaultAddress.city = item.city;
								this.defaultAddress.district = item.district;
								return ;
							}
							if(index>res.data.data.length-1){
								this.addrId = 0; 
							}
						})
					})
					.catch(err => {
						uni.showToast({
							title: err,
							duration: 2000
						})
					})
			}
		},
		onLoad() {
			this.init();
			this.getCustomerAddress();
		},
		onPullDownRefresh() {
			this.init();

		}
	}
</script>

<style>

</style>
